<template>
    <view>
        <view class="toptitle">
            <view class="title">
                <view class="avatit">
                    <view class="left">
                        <image :src="info.avatar" mode=""></image>
                        <view class="">
                            在线
                        </view>
                    </view>
                    <view class="right">
                        <view class="v1">
                            可接单
                        </view>
                        <!-- <view class="v2">
                            接单中
                        </view> -->
                    </view>
                </view>
                <view class="namebox">
                    <view class="name">
                        {{info.realName}}
                    </view>
                    <view class="label">
                        {{info.levelInfo}}
                    </view>
                </view>
                <view class="bottom">
                    <view class="sex">
                        {{info.sex}}
                    </view>
                    <view class="site">
                       <view>
                           <u-icon name="map-fill" color='#fff' size='15'></u-icon>
                       </view>
                       <text>河南 保定</text>
                    </view>
                </view>
            </view>
            <view class="liubai">
                
            </view>
            <view class="score">
                <view class='numb'>
                    咨询人数：{{info.agreement}}
                </view>
                <view class="scor">
                    评分：<u-rate :count="count" readonly gutter='1' size='13' v-model="info.score">    </u-rate>
                </view>
                <view class="shanc">
                    <view class="shanctit">
                     擅长模块：  
                    </view>
                    <scroll-view scroll-x="true" style="width: 70vw;">
                        <view class="con">
                            <view v-for=" (item,index) in info.goodWays" :key="index">
                                {{item.title}}
                            </view>
                        </view>
                    </scroll-view>
                    
                </view>
            </view>
        </view>
        <view class="content">
            <view class="datum">
                <view class="titleda">
                    <text></text>
                    咨询师资料：
                </view>
                <view class="conda">
                    国家认证心理二级咨询师（证书编号： 0811000008200533) 多家媒体特邀点评心理咨询师 多家医院特约讲师 麦粒导师
                </view>
                <!-- <view class="conda">
                                    暂无
                                </view> -->
            </view>
            
            <!-- <view class="experience">
                <view class="title">
                    <image src="/static/userSide/rongyu.png" mode=""></image>
                    <view>
                        培训经历
                    </view>
                </view>
                <view class="cent">
                    <view class="undergo">
                        <view class="untit">
                            <view class="yuan">
                                <view>
                                    
                                </view>
                            </view>
                            2019.1-2020.1
                        </view>
                        <view class="unicons">
                            EFT情绪疗法
                        </view>
                    </view>
                    <view class="undergo">
                        <view class="untit">
                            <view class="yuan">
                                <view>
                                    
                                </view>
                            </view>
                            2019.1-2020.1
                        </view>
                        <view class="unicons">
                            EFT情绪疗法
                        </view>
                    </view>
                </view>
            </view> -->
            <view class="evaluate" v-if="list.length > 0"> 
                <view class="evatit">
                    <view class="left">
                        用户评价
                    </view>
                    <view class="right">
                        全部<u-icon name="arrow-right" color="#999" size="10"></u-icon>
                    </view>
                </view>
                <view class="evaluatebox">
                    <view class="eva" v-for="(item, index) in list" :key="index">
                        <view class="usertit">
                            <view class="left">
                                <image src="" mode=""></image>
                                <view>
                                    {{item.adviserName}}
                                </view>
                            </view>
                            <view class="right">
                               {{item.createTime}}
                            </view>
                        </view>
                      <view class="evacon">
                          <u-rate :count="count" readonly gutter='1' size='13' v-model="item.score">    </u-rate>
                          <view class="pinghjia">
                              {{item.evaluateMsg}}
                          </view>
                      </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="liubai2">
            
        </view>
        <view class="bott">
            <view class="left" @click="chat">
                <image src="../../static/userSide/lxkf.png"></image>私聊
            </view>
            <view class="right" @click="oderde()">
                立即下单咨询
            </view>
        </view>
    </view>
</template>

<script>
	import {
		getUserInfo
	} from '../../api/api.js'
    export default {
        data() {
            return {
                value:2,
                count:5,
				userId:null,
				info:{},
				list:[]
            };
        },
		onLoad(option) {
			console.log(option)
			this.userId = option.id
			getUserInfo(option.id).then(res=>{
				console.log(res)
				this.info = res.data.info
				this.list = res.data.evaluation
			})
		},
        methods:{
            oderde(){
				if (this.userId == this.$store.state.userInfo.wxInfo.uid) {
					uni.showToast({
						title: "不能对自己下单",
						icon: "none", 
						duration: 3000
					});
				}else{
				
					let data = {
						id:this.userId,
						list:this.info.goodWays
					}
						console.log(data)
					var item = JSON.stringify(data)
					uni.navigateTo({
					    url:'/pages/userSide/orderDetails?item='+item
					})
				}
               
            },
            chat(){
				console.log(this.info)
				if (this.userId == this.$store.state.userInfo.wxInfo.uid) {
					uni.showToast({
						title: "不能和自己对话",
						icon: "none", 
						duration: 3000
					});
				}else{
					uni.navigateTo({
						url: '/pages/userSide/privateChat?id=' + this.userId + "&ava=" + this.info.avatar+ "&status=1"
					})
				}
               
            }
        }
    }
</script>
<style>
    page{
        background-color: #F6F6F6;
    }
</style>
<style lang="scss">
.toptitle{
    position: relative;
    .title{
        background-image: linear-gradient(to right,#60B6FD, #1989E1);
        padding: 30rpx 30rpx 120rpx;
        border-radius:0  0 60rpx 60rpx;
        .avatit{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left{
                position: relative;
                image{
                    width: 120rpx;
                    height: 120rpx;
                    border: 2rpx solid #fff;
                    border-radius: 200rpx;
                }
                view{
                    background-color: #fff;
                    position:absolute;
                    left:50%;bottom:0;
                    transform:translate(-50%,0);
                    color: #1989E1;
                    padding: 2rpx 10rpx;
                    border-radius: 50rpx;
                    font-size:20rpx ;
                }
            }
            .right{
                view{
                    padding:10rpx 30rpx;
                    border-radius: 50rpx;
                    background-color: #fff;
                    font-size: 24rpx;
                }
                .v1{
                     color: #1989E1;
                }
                .v2s{
                     color: red;
                }
            }
        }
        .namebox{
            color: #fff;
            display: flex;
            align-items: center;
            margin: 30rpx 0 15rpx;
            .name{
                font-size: 32rpx;
                margin-right: 15rpx;
            }
            .label{
                font-size: 20rpx;
                line-height: 32rpx;
                border: 1rpx solid #fff;
                border-radius: 5rpx;
                padding: 0 20rpx;
            }
        }
        .bottom{
            color: #fff;
            display: flex;
            align-items: center;
            .sex{
                font-size: 22rpx;
                margin-right: 20rpx;
            }
            .site{
                display: flex;
                align-items: center;
                font-size:22rpx ;
                text{
                    margin-left: 10rpx;
                }
            }
        }
    }
    .liubai{
        height: 110rpx;
    }
     .score{
            width: 92vw;
            position: absolute;
            left: 4vw;
            bottom: 0;
            background-color: #fff;
            border-radius: 10rpx;
            padding:15rpx 40rpx;
            color: #333;
             font-size: 22rpx;
            .numb{
                margin: 15rpx 0;
            }
            .scor{
                margin: 15rpx 0;
                display: flex;
                align-items: center;
            }
            .shanc{
                margin: 15rpx 0;
                display: flex;
                align-items: center;
                .con{
                    display: inline-flex;
                    view{
                        margin-right: 15rpx;
                        color: #fff;
                        background-color: #1989E1;
                        padding: 3rpx 15rpx;
                        border-radius: 5rpx;
                        font-size:20rpx ;
                    }
                }
            }
        }
}
.content{
    width: 92VW;
    margin: 30rpx auto;
    .datum{
        margin: 30rpx 0 0;
      .titleda{
          color: #333;
          font-size: 28rpx;
          display: flex;
          align-items: center;
          view{
              width: 8rpx;
              height: 8rpx;
              border-radius: 25rpx;
              background-color: #000;
              margin-right: 5rpx;
          }
          text{
              display: inline-block;
              height:25rpx;
              width: 10rpx;
              margin-right: 5rpx;
              background-image: linear-gradient(#1989E1, #fff);
          }
      } 
      .conda{
          color: #999;
          margin:20rpx 0;
          line-height: 55rpx;
          font-size: 26rpx;
      }
      
    }
    .experience{
        margin: 30rpx 0;
        .title{
            display: flex;
            align-items: center;
            color: #333;
            font-size: 24rpx;
            image{
                width: 25rpx;
                height: 30rpx;
                margin-right: 20rpx;
            }
        }
        .cent{
            margin: 30rpx 0;
            border-radius: 10rpx;
            background-color: #fff;
            box-shadow: 0 0 10rpx #eee;
            padding: 30rpx;
            .undergo{
               
                .untit{
                    display: flex;
                    align-items: center;
                    font-size: 20rpx;
                    color: #999;
                    .yuan{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: 10rpx;
                        width: 20rpx;
                        text-align: center;
                        height: 20rpx;
                        border: 1rpx solid #333;
                        border-radius: 20rpx;
                        view{
                            width: 8rpx;
                            height: 8rpx;
                            background-color: #333;
                            border-radius: 10rpx;
                        }
                    }
                }
                .unicons{
                position: relative;
                left: 8rpx;
                padding: 15rpx 30rpx 30rpx;
                border-left:1rpx dashed #333;
                 font-size: 20rpx;
                color: #333;
                }
            }
            .undergo:nth-last-child(1){
                .unicons{
                    border: 0;
                    left: 9rpx;
                     padding: 15rpx 30rpx 10rpx;
                }
            }
        }
    }
    .evaluate{
       .evatit{
           display: flex;
           justify-content: space-between;
           .left{
               font-size: 28rpx;
               color: #333;
           }
           .right{
               display: flex;
               font-size: 24rpx;
               color: #999;
           }
       } 
        .evaluatebox{
            .eva{
                margin-top: 30rpx;
                background-color: #fff;
                padding: 30rpx;
                border-radius: 10rpx;
                .usertit{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .left{
                        display: flex;
                        align-items: center;
                        image{
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                            border-radius: 50rpx;
                        }
                        view{
                            font-size: 28rpx;
                            color: #999;
                        }
                    }
                    .right{
                        font-size: 20rpx;
                        color: #999;
                    }
                }
                .evacon{
                    margin-left: 50rpx;
                    margin-top: 15rpx;
                    .pinghjia{
                        margin-top: 15rpx;
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }
        }
    }
}
.liubai2{
    height: 200rpx;
}
.bott{
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100vw;
    font-size: 32rpx;
    padding-bottom: 30rpx;
    background-color: #fff;
    .left{
        image{
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
        }
        width: 30vw;
        height:100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #2691E6;
    }
    .right{
        width: 70vw;
        height:100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: #2691E6;
    }
}
</style>
